/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

import React from 'react';
import { Form, Input, Button, DatePicker } from 'antd';
import { noop } from 'lodash';
import moment from 'moment';

const { RangePicker } = DatePicker;
const FormItem = Form.Item;

interface TemCommonFormType {
  form: any;
  onFinish: any;
  screenSize: boolean;
  isShowDate?: boolean;
}

const TemCommonForm = (props: TemCommonFormType) => {
  const { form, onFinish, screenSize, isShowDate } = props;

  const onReset = () => {
    form.resetFields();
    onFinish({});
  };

  return (
    <Form form={form} layout={screenSize ? 'vertical' : 'inline'} style={{ marginBottom: 20 }}>
      {isShowDate && (
        <FormItem label={'日期'} name='time' initialValue={moment()}>
          <RangePicker style={{ width: 300 }} disabledDate={(event) => event > moment()} />
        </FormItem>
      )}
      <FormItem label={'手机号码'} name='phone'>
        <Input allowClear style={{ width: 200 }} placeholder={'请输入手机号码'} />
      </FormItem>
      <FormItem>
        <Button type='primary' onClick={onFinish} loading={false}>
          查询
        </Button>
        <Button onClick={onReset} style={{ marginLeft: 15 }} loading={false}>
          重置
        </Button>
      </FormItem>
    </Form>
  );
};
TemCommonForm.defaultPorps = {
  onFinish: noop,
  isShowDate: false,
};

export default TemCommonForm;
